import { lazy, Suspense } from 'react'

//导入路由
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'

//导入组件(页面)
import Home from './pages/Home'
// import CityList from './pages/CityList'
// import Map from './pages/Map'
// import HouseDetail from './pages/HouseDetail'
// import Login from './pages/Login'
// import Registe from './pages/Registe'

// import Rent from '@/pages/Rent'
// import RentAdd from '@/pages/Rent/Add'
// import RentSearch from '@/pages/Rent/Search'

import AuthRoute from './components/AuthRoute'

//路由懒加载
const CityList = lazy(()=>import('./pages/CityList'))
const Map = lazy(()=>import('./pages/Map'))
const HouseDetail = lazy(()=>import('./pages/HouseDetail'))
const Login = lazy(()=>import('./pages/Login'))
const Registe = lazy(()=>import('./pages/Registe'))
const Rent = lazy(()=>import('@/pages/Rent'))
const RentAdd = lazy(()=>import('@/pages/Rent/Add'))
const RentSearch = lazy(()=>import('@/pages/Rent/Search'))

function App() {
  return (
    <Router>
      <Suspense fallback={ <div className="loading">loading...</div> }>
        <div className="App">
          {/* 默认路由匹配时跳转到/home 实现路由重定向到首页 */}
          <Route  path="/" exact render={ () => <Redirect to="/home" /> }></Route>
          {/* 配置路由 */}
          <Route path="/home" component={Home}></Route>
          <Route path="/citylist" component={CityList}></Route>
          <Route path="/map" component={Map}></Route>
          <Route path="/detail/:id" component={HouseDetail}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/registe" component={Registe}></Route>

          {/* 配置需要登录才能访问的路由 */}
          <AuthRoute exact path="/rent" component={Rent}></AuthRoute>
          <AuthRoute path="/rent/add" component={RentAdd}></AuthRoute>
          <AuthRoute path="/rent/search" component={RentSearch}></AuthRoute>
        </div>
      </Suspense>
    </Router>
  );
}

export default App;
